<template>
  <div class="bad-editor-dialog dialog">
    <q-dialog v-model="open"
              persistent
              transition-show="scale"
              transition-hide="scale">
      <q-card v-drag style="min-width: 500px" class="scrollbar">
        <q-card-section class="dialog-title bg-primary">
          <div class="text-center text-white">{{msg.title}}录入{{titleText}}</div>
        </q-card-section>
        <q-form @submit="submit"
                greedy
                @reset="reset"
                ref="myForm"
                class="dialog-content form-inline block">
            <div class="row padding-t-20">
              <div class="col"
                   v-if="msg.value === 'partscause'">
                <q-select
                          v-model="form.gidName"
                          :options="typeOption"
                          @input="getPartscauseItem(form.gidName)"
                          dense
                          options-dense
                          emit-value
                          map-options
                          outlined
                          :rules="[ val => val !== '' || `请选择${msg.title}类型`]">
                  <template v-slot:no-option>
                    <div class="no-option" />
                  </template>
                <template v-slot:before>
                  <label class="text-right name label-width">
                    <span>{{msg.title}}类型:</span>
                  </label>
                </template>
                </q-select>
              </div>
              <div class="col">
                <q-select
                          v-model="form.causeId"
                          :options="causeOptions"
                          @input="onChangeCauseId"
                          dense
                          options-dense
                          emit-value
                          map-options
                          outlined
                          :rules="[ val => val !== '' || `请选择${msg.title}原因`]">
                  <template v-slot:no-option>
                    <div class="no-option" />
                  </template>
                <template v-slot:before>
                  <label class="text-right name label-width">
                    <span>{{msg.title}}原因:</span>
                  </label>
                </template>
                </q-select>
              </div>
            </div>
                        <div class="row">
              <div class="col" v-if ="!isAdd">
                <!-- <q-select style="margin-bottom: 20px"
                          v-model="form.shiftsId"
                          :options="classOptions"
                          dense
                          options-dense
                          emit-value
                          :rules="[ val => val !== ''|| '请选择班次']"
                          map-options
                          outlined>
                  <template v-slot:before>
                    <label class="text-right name label-width">
                      <span>加工班次:</span>
                    </label>
                  </template>
                </q-select> -->
                <q-input
                          v-model="form.shiftsName"
                          :disable="true"
                          dense
                          emit-value
                          map-options
                          outlined>
                  <template v-slot:before>
                    <label class="text-right name label-width">
                      <span>加工班次:</span>
                    </label>
                  </template>
                </q-input>
              </div>
              <div class="col">
                <q-input
                         v-model.number="form.count"
                         dense
                         options-dense
                         emit-value
                         :rules="[ val => val !== '' || '请填写数量']"
                         map-options
                         outlined>
                  <template v-slot:before>
                    <label class="text-right name label-width">
                      <span>数量:</span>
                    </label>
                  </template>
                </q-input>
              </div>
            </div>
            <q-input outlined
                     v-model="form.remark"
                     type="textarea"
                     counter
                     autogrow
                     maxlength="50">
              <template v-slot:before>
                <label class="text-right name">说明:</label>
              </template>
            </q-input>
          <q-separator style="margin: 0 -20px;width: calc(100% + 40px)" />
          <div class="dialog-footer text-center margin-t-10">
            <q-btn outline
                   label="取消"
                   color="primary"
                   @click="$emit('close')"
                   class="q-mr-md"
                   type="reset" />
            <q-btn unelevated
                   label="确认"
                   color="primary"
                   type="submit" />
          </div>
        </q-form>
      </q-card>
    </q-dialog>
  </div>
</template>

<script>
import { getCauseTypeList, getCauseItem } from '../../../boot/system/reason'
// import { getShiftsList } from '../../../boot/job/man-machine-bind'
import {
  addQualityCauses,
  editQualityCauses
} from '../../../boot/job/quality-order'
import _ from 'lodash'
export default {
  name: 'bad-editor-dialog',
  props: {
    open: {
      type: Boolean,
      default: false,
      required: true
    },
    msg: {
      type: Object
    },
    editorData: {
      type: Object,
      default: () => {}
    },
    isAdd: Boolean,
    recordData: Object,
    init: Function // 初始化数据
  },
  computed: {
    titleText () {
      return this.isAdd ? '添加' : '编辑'
    },
    ruleText () {
      return this.msg.title
    }
  },
  watch: {
    // 'recordData.workshopId' (val) {
    //   this.getShiftsList(val)
    // },
    msg () {
      return this.msg.value === 'partscause'
        ? this.getPartscauseList()
        : this.getCauseList()
    },
    open (newPro) {
      if (newPro) {
        this.setFormData()
      }
    }
  },
  data () {
    return {
      typeOption: [], // 原因类型
      // classOptions: [], // 班次
      causeOptions: [], // 原因
      form: {
        gidName: '',
        shiftsName: '',
        causeId: '',
        count: '',
        remark: '',
        label: '',
        id: '',
        deviceId: ''
      }
    }
  },
  mounted () {},
  methods: {
    // 提交表单
    submit () {
      this.isAdd ? this.addQualityCauses() : this.editQualityCauses()
    },
    reset () {
      this.$refs.myForm.resetValidation()
    },
    /**
     *重置form表单
     *
     */
    onClearForm () {
      Object.keys(this.form).forEach(v => {
        this.form[v] = ''
      })
    },
    /**
     *切换原因input值
     *
     */
    onChangeCauseId (val) {
      this.form.label = this.causeOptions.find(v => v.value === val).label
    },
    setFormData () {
      if (!this.isAdd) {
        this.msg.value === 'partscause'
          ? this.getPartscauseItem(this.editorData.gid)
          : this.getConcessioncauseList(this.editorData.gid)
        // 增加判断编辑中是否存在历史班次,不存在默认为空
        // const isShiftsId = this.classOptions.some(v => {
        //   return v.value === this.editorData.shiftsId
        // })
        this.$nextTick(() => {
          this.form.count = this.editorData.count
          this.form.remark = this.editorData.remark
          this.form.causeId = this.editorData.causeId
          this.form.id = this.editorData.id
          this.form.gidName = this.editorData.gid
          // this.form.shiftsId = isShiftsId ? this.editorData.shiftsId : ''
          this.form.shiftsName = this.editorData.shiftsName
          this.form.shiftsModeId = this.editorData.shiftsModeId
          this.form.label = this.editorData.causeName
          this.form.deviceId = this.recordData.deviceId
        })
      } else {
        this.onClearForm()
      }
    },
    // 添加
    addQualityCauses () {
      this.form.id = this.recordData.id
      this.form.deviceId = this.recordData.deviceId
      const params = {
        causeId: this.form.causeId,
        count: this.form.count,
        label: this.form.label,
        deviceId: this.form.deviceId,
        orderId: this.form.id,
        gid: this.msg.value === 'partscause' ? this.form.gidName : null,
        // shiftsId: this.form.shiftsId,
        remark: this.form.remark
      }
      addQualityCauses(params).then(res => {
        if (res.code === '1200') {
          this.init()
          this.$q
            .dialog({
              title: `<p class="dialog-notice-title">
          <i class="iconfont icontubiao-53" ></i> 添加成功</p>`,
              html: true,
              ok: {
                unelevated: true,
                label: '确认'
              }
            })
            .onOk(() => {
              this.$emit('close')
            })
        }
      })
    },
    /**
     *编辑
     *
     */
    editQualityCauses () {
      const params = {
        causeId: this.form.causeId,
        count: this.form.count,
        label: this.form.label,
        orderId: this.form.id,
        gid: this.msg.value === 'partscause' ? this.form.gidName : null,
        // shiftsId: this.form.shiftsId,
        remark: this.form.remark,
        shiftsModeId: this.form.shiftsModeId
        // shiftsName: this.form.shiftsName
      }
      editQualityCauses(params).then(res => {
        if (res.code === '1200') {
          this.init()
          this.$q
            .dialog({
              title: `<p class="dialog-notice-title">
          <i class="iconfont icontubiao-53" ></i> 编辑成功</p>`,
              html: true,
              ok: {
                unelevated: true,
                label: '确认'
              }
            })
            .onOk(() => {
              this.$emit('close')
            })
        }
      })
    },
    // 获取原因类型
    getCauseList () {
      getCauseTypeList(2).then(res => {
        if (res.data.length > 0) {
          this.getConcessioncauseList(res.data[0].id)
        }
      })
    },
    // 获取让步原因列表
    getConcessioncauseList (typeId) {
      const params = {
        showDisable: false,
        causeGroupId: typeId
      }
      getCauseItem(params).then(res => {
        this.causeOptions = []
        if (res.data.length > 0) {
          res.data.forEach(o => {
            // 让步原因map（为取让步名）
            this.causeOptions.push({
              value: o.id,
              label: o.label
            })
          })
        }
      })
    },
    // 获取不良原因类型列表
    getPartscauseList () {
      getCauseTypeList(1).then(res => {
        this.typeOption = []
        if (res.data.length > 0) {
          res.data.forEach(o => {
            this.typeOption.push({
              value: o.id,
              label: o.label
            })
          })
          this.getPartscauseItem(res.data[0].id)
        }
      })
    },
    // 根据零件不良原因类型代码查询零件不良原因
    getPartscauseItem (typeId) {
      this.form.causeId = ''
      const params = {
        id: typeId,
        showDisable: false
      }
      getCauseItem(params).then(res => {
        if (res.data.length > 0) {
          this.causeOptions = []
          res.data.forEach(o => {
            // 让步原因map（为取让步名）
            // this.partscauseItemDetail[o.id] = o.label
            this.causeOptions.push({
              value: o.id,
              label: o.label
            })
          })
        }
      })
    },
    // 获取轮班列表
    // getShiftsList (id) {
    //   const params = {
    //     id: id
    //   }
    //   getShiftsList(params)
    //     .then(res => {
    //       this.classOptions = []
    //       if (res.data.length > 0) {
    //         res.data.forEach(o => {
    //           this.classOptions.push({
    //             value: o.id,
    //             label: o.name
    //           })
    //         })
    //       }
    //     })
    //     .catch(() => {
    //       console.log('获取数据失败')
    //     })
    // },
    /**
     *
     *判断是否为null
     */
    isNull (val) {
      return _.isEmpty(val)
    }
  }
}
</script>

<style scoped lang="stylus">
.q-gutter-x-md .q-gutter-md
  margin-left 0px !important
</style>
